<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo 重写</title>
		<style>
			/* 以下是 数据表 的样式 */
			table {
				/* 所有表格的样式 */
				width: 1000px;
				text-align: center;
				border: 1px solid #D3D3D3;
				background-color: #FAEBD7;
				/* 居中 */
				margin: auto;
			}

			table th,
			table td {
				/* 所有表 的边框 */
				border: 1px solid #D3D3D3;
			}

			table td {
				/* 所有表 的样式 */
				color: #696969;
				font-family: "幼圆";
				/* 字体加粗 */
				font-weight: 560;
			}

			/*设置偶数行颜色*/
			.tableClass1 tr:nth-child(even) {
				background-color: rgba(221, 160, 10, 0.5);
			}

			/*设置鼠标聚焦到行上是凸显*/
			.tableClass1 tr:hover {
				background-color: burlywood;
			}

			/* 以下是"更新表" 的样式 */
			.hideDiv {
				/* "更新"div 的格式 */
				/* 位置 fixed是相对于浏览器 */
				position: fixed;
				/* 外边距 auto是使居中 */
				margin: auto;
				/* 四个边距值相同 使div覆盖整个页面 */
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				/* 在最上层显示 */
				z-index: 999;
				/* 设置颜色和透明度 越高越不透明 */
				background-color: rgba(182, 193, 206, 0.5);
				/* 内边距 此处是上外边距 */
				padding: 10%;
			}

			.hideDiv table {
				/* "更新"表格 的格式 */
				background-color: #FFE4C4;
			}

			/* 以下是按钮样式 */
			button {
				/* 所有button的样式 */
				/* 默认颜色 */
				background-color: seagreen;
				/* 边框 */
				border: none;
				/* 字体颜色 */
				color: white;
				/* 内边距 分别是上下边距和左右边距*/
				padding: 5px 10px;
				/* 字居中 */
				text-align: center;
				/* 文本样式 如下划线等 */
				/* text-decoration: none; */
				display: inline-block;
				/* 字号 */
				font-size: 16px;
				/* 字体 */
				font-family: '幼圆';
				/* 外边距 分别是上下边距和左右边距*/
				margin: 2px 2px;
				/* 鼠标悬浮时 鼠标样式变成手的形状 */
				cursor: pointer;
				/* 圆角 */
				border-radius: 3px;
			}

			button.cancle {
				background-color: darkgray;
			}

			button.add {
                background-color: mediumseagreen;
            }

            button.del {
                background-color: #696969;
            }

            button.update {
                background-color: #DDA0DD;
            }

            /* input样式 */
            input[type=text] {
                /* 边框 */
                border: 0px;
                border-radius: 3px;
                /* 左外边距 */
                margin-left: 5px;
                /* 字体 */
                font-size: 15px;
            }
        </style>
	</head>
	<body>
		<div id="app">
			<!-- 本div用于更新 默认隐藏 点击"修改"按钮显示 -->
			<div class="hideDiv" :style="styleHideDiv">
				<table>
					<tr>
						<th colspan="6">
							更新表
						</th>
					</tr>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th colspan="2">操作</th>
					</tr>
                    <tr>
                        <td v-text="userUpdate.id"></td>
                        <td><input type="text" v-model="userUpdate.name" placeholder="请输入姓名以更新..."/></td>
                        <td><input type="text" v-model="userUpdate.age" placeholder="请输入年龄以更新..."/></td>
                        <td><input type="text" v-model="userUpdate.sex" placeholder="请输入性别以更新..."/></td>
                        <td>
                            <button @click="confirmUpdate" class="update">更新</button>
                        </td>
                        <td>
                            <button @click="hideDiv" class="cancle">取消</button>
                        </td>
                    </tr>
				</table>
			</div>
			<!-- 本div显示用户列表 包括 添加/修改/删除/翻页/设置每页数据条数 功能 -->
			<div>
				<table>
					<tr>
						<th colspan="6">
							<h1>用户列表</h1>
						</th>
					</tr>
					<!-- 本表格行用于 添加一条数据 -->
                    <tr>
                        <td>编号:</td>
                        <td>姓名:<input type="text" v-model="userAdd.name" placeholder="请输入姓名以添加..."/></td>
                        <td>年龄:<input type="text" v-model="userAdd.age" placeholder="请输入年龄以添加..."/></td>
                        <td>性别:<input type="text" v-model="userAdd.sex" placeholder="请输入性别以添加..."/></td>
                        <td>
                            <button @click="confirmAdd" class="add">添加</button>
                        </td>
                        <td>
                            <button @click="clearUser(userAdd)" class="cancle">清空</button>
                        </td>
                    </tr>
					<!-- 本表格行用于 设置每页数据条数 以及 前后翻页 -->
					<tr>
						<td colspan="3">

						</td>
						<td>
							每页条数:<input type="text" v-model.number.lazy="rowsPerPage" placeholder="请输入每页显示的数据条数.." />
						</td>
						<td>
							<button @click="prePage">上一页</button>
						</td>
						<td>
							<button @click="nextPage">下一页</button>
						</td>
					</tr>
				</table>
				<!-- 本表用于 显示用户数据 -->
				<table class="tableClass1">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th colspan="2">操作</th>
					</tr>
					<!-- 本表格行用于 遍历显示一页数据 -->
					<tr v-for="(user1,index) in userList" v-if="index>=userIndex&&index<userIndex+rowsPerPage">
						<td v-text="user1.id"></td>
						<td v-text="user1.name"></td>
						<td v-text="user1.age"></td>
						<td v-text="user1.sex"></td>
						<td><button @click="showDiv(user1)" class="update">修改</button></td>
						<td><button @click="confirmDelete(user1.id)" class="del">删除</button></td>
					</tr>
				</table>
			</div>
		</div>

		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			/* 设置默认的url前缀  */
			axios.defaults.baseURL = `http://127.0.0.1:8090`
			const APP = new Vue({
				//不要忘记# .等符号
				el: '#app',
				data: {
                    /* restFul风格的url 各个方法的url都是 /VueAxios/user */
                    url: '/VueAxios/user',
                    userAdd: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
                    },
                    userUpdate: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
                    },
                    emptyUser: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
					},
					userList: [],
					rowsPerPage: 5,
					userIndex: 0,
					styleHideDiv: {
						display: 'none'
					}
				},
				methods: {
                    /* 获取用户数据 */
                    async getUserList() {
                        let {
                            data: value
                        } = await axios.get(`${this.url}`)
                        this.userList = value
                    },
                    /* 新增 更新 删除方法 */
                    async add() {
                        let name = this.userAdd.name
                        let age = this.userAdd.age
                        let sex = this.userAdd.sex
                        await axios.post(`${this.url}/${name}/${age}/${sex}`)
                        this.getUserList()
                    },
                    async update() {
                        let id = this.userUpdate.id
                        let name = this.userUpdate.name
                        let age = this.userUpdate.age
                        let sex = this.userUpdate.sex
                        await axios.put(`${this.url}/${id}/${name}/${age}/${sex}`)
                        this.getUserList()
                    },
                    async delete(id) {
                        await axios.delete(`${this.url}/${id}`)
                        this.getUserList()
                    },
                    /* 一些相关的判断操作 */
                    //判断user是否为空
                    userIsEmpty(user) {
						if (user.name == '' || user.age == '' || user.sex == '') {
							alert(`请不要输入空值!!重新输入!!`)
							return 1
						} else {
							return 0
						}
					},
					//判断框
					confirmPanel(confirmWord) {
						return confirm(`确认${confirmWord}??`)
					},
					//是否执行添加操作的判断
					confirmAdd() {
                        if (!this.userIsEmpty(this.userAdd)) {
                            if (this.confirmPanel('添加')) {
                                this.add()
                            }
                        }
                    },
					//是否执行更新操作的判断
					confirmUpdate() {
                        if (!this.userIsEmpty(this.userUpdate)) {
                            if (this.confirmPanel('更新')) {
                                this.update()
                            }
                        }
                    },
                    //是否执行删除操作的判断
                    confirmDelete(id) {
                        if (this.confirmPanel('删除')) {
                            this.delete(id)
                        }
                    },
                    /* 用于显示和隐藏 "更新"表 */
                    clearUser(user) {
                        this.shallowCopy(this.emptyUser, user)
                    },
                    //浅复制 把传入的参数user1浅拷贝至user
                    shallowCopy(user1, user) {
                        user.id = user1.id
                        user.name = user1.name
                        user.age = user1.age
                        user.sex = user1.sex
                    },
                    //显示"更新"表格
                    showDiv(user) {
                        this.shallowCopy(user, this.userUpdate)
                        this.styleHideDiv.display = 'block'

                    },
                    //隐藏"更新"表格 以及清空user属性
                    hideDiv() {
                        this.shallowCopy(this.emptyUser, this.userUpdate)
                        this.styleHideDiv.display = 'none'
                    },
					/* 翻页操作 */
					prePage() {
						if (this.userIndex >= this.rowsPerPage) {
							this.userIndex -= this.rowsPerPage
						} else {
							this.userIndex = 0
						}
					},
					nextPage() {
						if (this.userIndex < this.userList.length - this.rowsPerPage) {
							this.userIndex += this.rowsPerPage
						}
					}
				},
				mounted() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
